<?

$_GET['pixels'] = 8;

#########################

?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://static.openheatmap.com/scripts/jquery.openheatmap.js"></script> 
<script>
$(document).ready(function() {
  $("#openheatmap_container").insertOpenHeatMap({
    width: 800, 
    height: 600
  });
});

function onMapCreated() {
	var map = $.getOpenHeatMap();

<? if ($portal['count']) {
	list($miny,$maxy,$minx,$maxx) = array_values(getRow("SELECT MIN(wgs84_lat),MAX(wgs84_lat),MIN(wgs84_long),MAX(wgs84_long) FROM p2.gridimage{$portal_id}_bi_view"));
	$miny -= 0.1;
	$maxy += 0.1; $spany = $maxy - $miny;
	$minx -= 0.1;
	$maxx += 0.1; $spanx = $maxx - $minx;
	
	$ratio = 800/600;
	$spanxnormnal = ($spanx/$ratio);
	if ($spanxnormnal > $spany) {
		//wide
		$ceny = ($miny+$maxy) /2;
			
		$delta = ($spanxnormnal / $ratio) * 0.45; //fudge for the fact that lat/long not square ;)
			
		$miny = $ceny - $delta;
		$maxy = $ceny + $delta;
	} else {
		//tall
		$cenx = ($minx+$maxx) /2;
		
		$delta = $spany * $ratio * 0.8; //fudge for the fact that lat/long not square ;)
		
		$minx = $cenx - $delta;
		$maxx = $cenx + $delta;
	}

	print "map.setLatLonViewingArea($maxy, $minx, $miny, $maxx);";

} else { ?>
	map.setLatLonViewingArea(61, -17, 49.8, 7);
<? } ?>

	map.setSetting('credit_text','');

	map.setSetting('title_text', 'Density of photos in the <? echo he($row['title']); ?> Portal');
	map.setSetting('title_size', 15);
	map.setSetting('title_color', '0x303030');

	<? if (isset($_GET['pixels'])) { ?>
		map.setSetting('point_blob_radius', <? echo intval($_GET['pixels']); ?>);
		map.setSetting('is_point_blob_radius_in_pixels', true);
	<? } else { ?>
		map.setSetting('point_blob_radius', 0.1);
		map.setSetting('point_blob_value', 1);
	<? } ?>

	map.setSetting('information_alpha', 0.72);
	map.setSetting('gradient_value_min', 0);
	map.setSetting('gradient_value_max', 0);

	map.setSetting('show_map_tiles', true);

	//    map.setColorGradient(['#d8001db0','#d8e0e000','#d8ff0000']);
	//    map.setGradientValueRange(0, 12);
	//    map.setSetting('point_bitmap_scale', 1);

	map.loadValuesFromFile("heatmap.csv.php");

	map.bind('click', 'onMapClick');
}

function onMapClick(event) {
	$.get("/images.ajax.php?lat="+event.lat+"&long="+event.lon,function (data) {
		$("#photo_container").html(data);
	});
	
	return true;
}

</script>

<div style="width:800px">
<div style="float:right;font-size:0.7em">
	Zoom by dragging the slider, or double click.<br/>
	- or press and drag to move the map.<br/>
	<b>Single click to load nearby photos.</b>
</div>
<?
print "<form class=\"sform\">";
print "<div class=\"d\">";
print "View style<br/>";
print "<select name=\"view\" onchange=\"this.form.submit()\">";
foreach ($views as $key => $value) {
	printf("<option value=\"%s\"%s>%s</option>",$key,($key==$opt['view'])?' selected':'',$value);
}
print "</select></div>";
print "</form>";

?>
</div>
<br style="clear:both"/>

<div id="openheatmap_container" style="width:800px;height:600px">Loading...</div>
<div style="width:800px;text-align:center;font-size:0.7em">basemap by <a href="http://www.openstreetmap.org/">OpenStreetMap</a>, density plotting by <a href="http://openheatmap.com">OpenHeatMap</a>
 and photos by <a href="http://www.geograph.org.uk/credits/">Geograph</a></a></div>

<div id="photo_container" style="width:800px;"></div>



